<template>
    <div>
        <div>
            <div>
                <el-input
                    class="searchInput"
					clearable
					@clear="clearKeyword"
                    placeholder="请输入学号进行搜索..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    style="width: 350px;margin-right: 10px">
            </el-input>
            <el-button icon="el-icon-search" @click="doSearch" type="primary">搜索</el-button>
            <el-button icon="el-icon-plus" @click="showAddView" type="primary">添加学生</el-button>
            </div>
            <div style="margin-top: 10px">
                <el-table   
                        :data="students"
                        stripe
                        border
						@selection-change="handleSelectionChange"
                        style="width: 70%">
                    <el-table-column
                            type="selection" width="55">
                    </el-table-column>
                    <el-table-column
                            prop="studentId" label="学号" width="130">
                    </el-table-column>
                    <el-table-column
                            prop="name" label="姓名" width="80">
                    </el-table-column>
                    <el-table-column
                            prop="gender" label="性别" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="major.name" label="专业" width="150">
                    </el-table-column>
                    <el-table-column
                            prop="level" label="学级" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="aclass.name" label="班级" width="90">
                    </el-table-column>
                    <el-table-column
                            prop="telephone" label="电话" width="130">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" type="primary">编辑</el-button>
                            <el-button @click="doDelete(scope.row)" style="padding: 8px" size="small" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-button size="small" @click="doDeleteSome" type="danger" icon="el-icon-delete" style="padding: 8px">批量删除</el-button>
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
						:current-page="current"
						:page-size="size"
						:page-sizes="[10,20,40]"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
			
            <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
                <div style="display: flex;justify-content: center;">
                    <el-form :model="studentInfo" :rules="rules" ref="studentForm" label-width="100px">                        
                        <el-form-item label="学号" prop="studentId">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="studentInfo.studentId" placeholder="请输入学号"></el-input>
                        </el-form-item>     
                        <el-form-item label="姓名" prop="name">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="studentInfo.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>   
                        <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="studentInfo.gender">
                                    <el-radio label="男" style="margin-left: 5px;">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                        </el-form-item>
                        <el-form-item label="专业" prop="majorId">
                            <el-select v-model="studentInfo.majorId" size="small" style="width:180px;" placeholder="请选择专业" @change="majorChange">
                                <el-option
                                        v-for="item in majors"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="学级" prop="level">
                            <el-input v-model="studentInfo.level" style="width:180px" 
                                        size="small" placeholder="请输入学级">
                            </el-input>
                        </el-form-item> 
                        <el-form-item label="班级" prop="classId">
                            <el-select v-model="studentInfo.classId" size="small" style="width:180px;" placeholder="请选择班级">
                                <el-option
                                        v-for="item in classes"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="电话" prop="telephone">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="studentInfo.telephone" placeholder="请输入电话号码"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAddOrEdit">确 定</el-button>
                </span>
            </el-dialog>        
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                students:[],
                keyword:'',
				multipleSelection: [],
				current: 1,
				size: 10,
                total: 0,
                title: '',
                dialogVisible: false,
				destroyOnClose: false,
                studentInfo: {},
                majors:[],
                selectedMajorId: 0,
				classes:[],
                rules:{
                    studentId: [{required: true, message: '请输入学号',trigger: 'blur'}],
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    majorId: [{required: true, message: '请选择专业', trigger: 'blur'}],
                    level: [{required: true, message: '请输入学级', trigger: 'blur'}],
                    classId: [{required: true, message: '请选择班级', trigger: 'blur'}],
                    telephone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                },
            }
        },
		mounted() {
			this.initStudents();
			this.initMajors();
		},
        methods: {
			initStudents(){
				let url = '/information/student/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.students = resp.data;
						this.total = resp.total;
					}
				})
			},
			initMajors(){
				if(!window.sessionStorage.getItem("majors")) {
					this.getRequest("/practice/allot/majors").then(resp => {
						if(resp){
							this.majors = resp.data;
							window.sessionStorage.setItem("majors", JSON.stringify(resp));
						}
					})
				}else {
					this.majors = JSON.parse(window.sessionStorage.getItem("majors"));
				}
			},
			initClasses(){
				this.getRequest("/practice/allot/classes/" + this.selectedMajorId).then(resp => {
					if(resp) {
						this.classes = resp;
					}
				})
			},
			clearKeyword(){
				this.current = 1;
				this.initStudents();
			},
            doSearch(){
				this.current = 1;
				this.initStudents();
            },
			emptyStudentInfo(){
				this.studentInfo = {};
			},
            showAddView(){
				this.emptyStudentInfo();
				this.title = "添加学生";
				this.destroyOnClose = true;
                this.dialogVisible = true;
            },
            doAddOrEdit(){
				if (this.studentInfo.id) {
					this.$refs['studentForm'].validate(valid => {
						if (valid) {
							this.putRequest("/information/student/", this.studentInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initStudents();
								}
							})
						}
					});
				} else {
					this.$refs['studentForm'].validate(valid => {
						if (valid) {
							this.postRequest("/information/student/", this.studentInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initStudents();
								}
							})
						}
					});
				}
            },
            doDelete(data){
				this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/information/student/" + data.id).then(resp => {
						if (resp) {
							this.initStudents();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
            doDeleteSome(){
				let ids = [];
				for (let data of this.multipleSelection) {
					ids.push(data.id);
				}
				this.$confirm('此操作将删除【' + ids.length + '】条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/information/student/" , ids).then(resp => {
						if (resp) {
							this.initStudents();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
            showEditView(data){
				this.majorChange(data.majorId);
                this.title = '修改学生信息';
				this.studentInfo = data;
                this.dialogVisible = true;
            },
			currentChange(page){
				this.current = page;
				this.initStudents();
			},
			sizeChange(value){
				this.size = value;
				this.initStudents();
			},
			majorChange(data){
				this.selectedMajorId = data;
				this.initClasses();
			},

        },
		watch:{
			selectedMajorId: function(){
				this.initClasses();
			}
		}
    }
</script>

<style scoped>
    .page{
        width: 70%;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }
</style>